<template>
	<div class="mt15">
		<el-row :gutter="20">
			<el-col :span="5">
				<div class="pl30 mt15">
					<div class="main-color fs16 mb20 fb">
						商品分类
					</div>
					<el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
						@node-click="handleNodeClick" :highlight-current="true">
						<template #default="{ node, data }">
							<div class="custom-tree-node flex col-center row-between">
								<span>{{ node.label }}</span>
							</div>
						</template>
					</el-tree>
				</div>
			</el-col>
			<el-col :span="19">
				<div class="flex col-center row-between pb10">
					<div>
						已选择<span class="main-color">{{ids.length}}</span>个商品
					</div>
					<el-form class="flex col-top row-between" :model="queryParams" ref="queryRef" :inline="true">
						<el-form-item label="商品名称/编号" prop="keyword" style="margin-bottom: 0;">
							<el-input v-model="queryParams.keyword" placeholder="请输入" clearable class="resetInput"
								style="width: 200px" :suffix-icon="Search" />
						</el-form-item>
						<el-button class="mt5" type="defaultBtn" @click="handleQuery">搜索</el-button>
						<el-button class="mt5" @click="resetQuery">重置</el-button>
					</el-form>
				</div>
				<!-- @selection-change="handleSelectionChange" -->
				<el-table ref="table" v-loading="loading" :data="list" style="width: 100%;"
					:header-row-style="{background:'#FAFAFA',color:'#0C1019',height:'54px'}"
					:cell-style="{height:'54px'}" 
					@select="handleRowClick"
					@select-all="handleSelectionChange"
					>
					<el-table-column type="selection" width="55" align="center"/>
					<el-table-column label="商品名称" align="center" prop="commodityName" width="320" :show-overflow-tooltip="true" />
					<el-table-column label="商品编号" align="center" prop="commodityNumber" :show-overflow-tooltip="true" />
					<el-table-column label="标准单价" align="center" prop="caseUnitPrice" width="100"
						:show-overflow-tooltip="true" />
					<el-table-column label="产品规格" align="center" prop="specificationId" width="100"
						:show-overflow-tooltip="true">
						<template v-slot="scope">
							<dict-tag :options="bus_product_specification_unit" :value="scope.row.specificationId" />
						</template>
					</el-table-column>
					<!-- <el-table-column label="启用状态" align="center" prop="status">
						<template v-slot="scope">
							<el-switch disabled v-model="scope.row.status" class="ml-2" inline-prompt active-text="启用"
								inactive-text="禁用" :loading="loading" />
						</template>
					</el-table-column> -->
					<el-table-column label="备注信息" align="center" prop="remark" width="100"
						:show-overflow-tooltip="true" />
				</el-table>
				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
					v-model:limit="queryParams.pageSize" @pagination="getList" />
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		listClassify1, //商品分类树
		listGoods, //列表
	} from "@/api/business/product";
	import {
		resetForm,
		getUserInfo
	} from '@/utils/ruoyi'
	import {
		customerList
	} from "@/api/business/customer";
	export default {
		props:{
			idArr:{
				type:Array,
				default:res=>{
					return []
				}
			}
		},
		data() {
			return {
				data: [], //分类树数据
				total: '',
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					status: 0,
					keyword: '',
					classifyId: '',
					channelType: '', // 销售渠道
				}, //查询参数
				list: [],
				loading: true,
				bus_product_specification_unit: this.useDict('bus_product_specification_unit')
					.bus_product_specification_unit,
				ids: this.idArr
			}
		},
		watch:{
			idArr(val){
				this.ids = val
				console.log(this.ids,'this.ids')
				//是否选中
				this.checkList()
			}
		},
		mounted() {
			this.getTree(1)
		},
		methods: {
			handleNodeClick(e) {
				if (e.id * 1 != -1) {
					this.queryParams.classifyId = e.id
				} else {
					this.queryParams.classifyId = ''
				}
				this.getList();
			},
			//分类树
			getTree(num) {
				listClassify1().then(res => {
					if (res.code == 200) {
						let arr = [{
							ancestors: '',
							id: '-1',
							name: '全部',
							parentId: ''
						}]
						let dataArr = arr.concat(res.data)
						for (let key in dataArr) {
							dataArr[key].label = dataArr[key].name
						}
						this.data = this.handleTree(dataArr)
						if (num == 1) {
							this.getList()
						}
					}
				})
			},
			// 搜索
			handleQuery() {
				this.getList()
			},
			// 重置按钮操作
			resetQuery() {
				this.resetForm("queryRef");
				this.handleQuery();
			},
			// 点击一行选中
			handleRowClick(row,column) {
				column.flag = !column.flag
				let allIds = [...this.ids];
				//单击选中，不包含添加
				if (column.flag == true && !allIds.includes(column.id)) {
					allIds.push(column.id)
				}else{
					for (let key in allIds) {
						if(column.id == allIds[key]){
							allIds.splice(key,1)
						}
					}
				}
				this.ids = allIds
				this.$emit('getValue', this.ids)
			},
			// 多选框选中数据
			handleSelectionChange(selection) {
				let allIds = [...this.ids];
				// 取消全选，遍历已选中的id
				if(selection.length == 0){
					for(let key in this.list){
						for(let j in allIds){
							if(allIds[j] == this.list[key].id){
								//没有选中，删除对应的数据
								allIds.splice(j,1)
							}
						}
					}
				}else{
					//有选中的数据，如果数据没有添加过，添加
					selection.map(item => {
						if (!allIds.includes(item.id)) {
							allIds.push(item.id)
						}
					})
				}
				this.ids = [...allIds]
				console.log(this.ids,'ids===')
				this.$emit('getValue', this.ids)
			},
			//查询商品列表
			getList() {
				this.loading = true;
				listGoods(this.queryParams).then((response) => {
					this.list = response.rows;
					for (let key in this.list) {
						this.list[key].status = this.list[key].status == '0' ? true : false
						this.list[key].flag = false
					}
					this.total = response.total;
					this.loading = false;
					this.checkList()
				});
			},
			checkList(){
				this.$nextTick(() => {
					this.list.map((item) => {
						if (this.ids.includes(item.id)) {
							this.$refs.table.toggleRowSelection(item, true)
							item.flag = true
						}else{
							this.$refs.table.toggleRowSelection(item, false)
							item.flag = false
						}
					})
				})
			}
		}
	}
</script>

<style>
	.el-tree-node {
		margin: 6px 0;
	}
</style>